<template>
  <!--车辆数据展示-->
  <div class="contentRight" style="background-color: #f0f2f5;">
    <a-row type="flex" class="marginBottom" style="width: 100%;flex-wrap: nowrap;">
      <!--第一排左侧-->
      <a-col flex="60%" style="background-color: #fff">
        <a-card size="small" title="全部基地车位总数统计" :bordered="false">
          <!--<a slot="extra" href="#">右上角</a>-->

          <p style="font-weight: bold; text-align: center;font-size: 16px;margin: 40px 0 50px 0;">全部基地车位总数统计</p>

          <!--顶部统计-->
          <a-row :gutter="10">
            <a-col :span="12">
              <a-card size="small" :bordered="false" class="cardSelf">
                <div class="flex">
                  <img class="carIconImg" src="http://dss.schaefflercn.com:9070/static/img/carsOn.png"/>
                  <a-statistic
                    title="剩余车位"
                    :value="allSurplusCarport"
                    :value-style="{ color: '#3f8600' }"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card size="small" :bordered="false" class="cardSelf">
                <div class="flex">
                  <img class="carIconImg" src="http://dss.schaefflercn.com:9070/static/img/carsOff.png"/>
                  <a-statistic
                    title="已停车位"
                    :value="allStopCarport"
                    :value-style="{ color: '#cf1322' }"
                  >
                  </a-statistic>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>

      <a-col flex="10px"></a-col>
      <!--第一排右侧-->
      <a-col flex="auto" >
        <a-card size="small" title="安亭基地" :bordered="false" style="margin-bottom: 10px">
          <!--<template slot="extra">-->
            <!--<a-dropdown>-->
              <!--<a  class="ant-dropdown-link menuA">-->
                <!--{{antingAreaName}}<a-icon type="down" />-->
              <!--</a>-->
              <!--<a-menu slot="overlay" @click="handleClick">-->
                <!--<a-menu-item class="menuA" v-for="item in aningAreaAll" :key="item.id" :value="item.areaName">-->
                  <!--{{item.areaName}}-->
                <!--</a-menu-item>-->
              <!--</a-menu>-->
            <!--</a-dropdown>-->
          <!--</template>-->

          <div :style="{height: '200px',overflow: antingcarsData.length > 2 ? 'auto':'inherit'}">
            <div v-if="antingcarsData.length !=0">

              <div style="border: 1px solid #3f8600;margin-bottom: 10px" v-for="(item,index) in antingcarsData" :key="index">
                <a-row :gutter="10" type="flex" justify="space-around">
                  <a-col :span="8">
                    <div class="flex3">
                      <span style="font-size: 14px;">{{item.bdStation}}</span>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <a-card size="small" :bordered="false" >
                      <div class="flex">
                        <img class="carIconImg2" src="http://dss.schaefflercn.com:9070/static/img/carsOn.png"/>
                        <a-statistic
                          title="剩余车位"
                          :value="item.surplusCarport"
                          :value-style="valueGreen"
                        >
                        </a-statistic>
                      </div>
                    </a-card>
                  </a-col>
                  <a-col :span="8">
                    <a-card size="small" :bordered="false" >
                      <div class="flex">
                        <img class="carIconImg2" src="http://dss.schaefflercn.com:9070/static/img/carsOff.png"/>
                        <a-statistic
                          title="已停车位"
                          :value="item.stopCarport"
                          :value-style="valueRed"
                        >
                        </a-statistic>
                      </div>
                    </a-card>
                  </a-col>
                </a-row>
              </div>

            </div>

            <div v-else style="width: 100%;height: 200px;text-align: center;line-height: 200px">
              {{antingResultMsg}}
            </div>

          </div>
          <!--<div v-else id="container" class="charthuan"></div>-->

        </a-card>

        <a-card size="small" title="银川基地" :bordered="false">
          <div style="width: 100%;height: 200px;text-align: center;line-height: 200px">
            该区域暂未开通
          </div>
        </a-card>

      </a-col>
    </a-row>

    <!--第二排-->
    <a-row type="flex" class="marginBottom" style="width: 100%">
      <a-col flex="50%" style="background-color: aqua">
        <a-card size="small" title="太仓基地" :bordered="false">
          <div style="width: 100%;height: 200px;text-align: center;line-height: 200px">
            该区域暂未开通
          </div>
        </a-card>
      </a-col>
      <a-col flex="10px"></a-col>
      <a-col flex="auto" style="background-color: blueviolet">
        <a-card size="small" title="湘潭基地" :bordered="false">
          <div style="width: 100%;height: 200px;text-align: center;line-height: 200px">
            该区域暂未开通
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import reservationApi from "@/api/reservation";

export default {
  components: {

  },
  name:'',
  data() {
    return {
      loading1: false,
      aningAreaAll:[],
      antingChart: null,  //安亭数据图形对象
      antingAreaName:"办公区域",
      antingAreaId: "1",
      antingResultMsg: "加载中...",

      allStopCarport: 0 , //所有基地已停车辆
      allSurplusCarport: 0 , //所有基地剩余车辆

    intervalId:null,   //定时器，定时刷新页面
      antingData: [],
      antingcarsData: [],
      valueGreen: { color: '#3f8600',fontSize: '20px',
    lineHeight: '20px' },
      valueRed: { color: '#cf1322',fontSize: '20px',
        lineHeight: '20px' },
    }
  },
  beforeMount(){
      // this.getAntingAreaList();
  },
  created(){
    this.dataRefreh();
  },
  destroyed(){
    // 在页面销毁后，清除计时器
    this.clear();
  },
  mounted() {
    this.fristAntingData();
  },
  methods: {
    // 获取安亭基地区域
    async getAntingAreaList(){
      let res = await reservationApi.getVisitorTypeAreaList({typeId: 100})
      // console.log(res.data);
      if (res.data.success){
        this.aningAreaAll = res.data.result;
      } else {
        this.$message.error(res.data.message);
      }

    },
    // 定时刷新数据函数
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        // console.log("刷新" + new Date());
        this.fristAntingData();
      }, 20000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    // 加载所有基地数据
    fristAntingData(){
      this.getAllBaseCase();
      this.getAntingCase();
      // this.pieChart1()
    },
    // 安亭基地切换区域--不用
    async handleClick(e) {
      // console.log(e)
      this.antingAreaName = e.item.value;
      this.antingAreaId = e.key;
      await this.getAntingCase();
      // this.antingChart.data(this.antingData);
      // this.antingChart.render();
    },
    // 定时加载安亭数据--不用
    async loadAntingDataRegularly() {
      await this.getAntingCase();
      // this.antingChart.data(this.antingData);
      // this.antingChart.render();
    },
    // 获取安亭基地数据
    async getAntingCase() {
      let params = {
        baseId : 100,
      };
      let resp = await reservationApi.getVehicleUsage(params);
      // console.log(resp.data.result);
      if (resp.data.success) {
        this.antingcarsData = resp.data.result;
        // bdStation: null   停车场名称
        // stopCarport: "10"   已停车位
        // surplusCarport: "4"   剩余车位
        if (resp.data.result.length == 0){
          this.antingResultMsg = "该基地未查询到数据";
        }
      } else {
        this.antingResultMsg = resp.data.message;
        // this.$message.error(resp.data.message);
      }
    },
    // 获取所有基地数据
    async getAllBaseCase() {
      // this.loading = true;
      let params = {
        baseId : "",
      };
      let resp = await reservationApi.getVehicleUsage(params);
      // console.log(resp.data.result);
      if (resp.data.success) {
        if (resp.data.result[0] != null) {
          this.allStopCarport = resp.data.result[0].stopCarport;
          this.allSurplusCarport = resp.data.result[0].surplusCarport;
        } else {
          this.allStopCarport = 0;
          this.allSurplusCarport = 0;
        }
        // bdStation: null   停车场名称
        // stopCarport: "10"   已停车位
        // surplusCarport: "4"   剩余车位

      } else {
        this.$message.error(resp.data.message);
      }
    },
    // 安亭访客数据饼图--不用
    pieChart1() {
      // const antingData = [
      //   { type: '今日预约总人数', value: 1 },
      //   { type: '今日到访总人数', value: 0 },
      //   { type: '今日未审批人数', value: 0 },
      // ];

      const chart = new Chart({
        container: 'container',
        autoFit: true,
        height: 500,
      });
      this.antingChart = chart;
      chart.data(this.antingData);
      chart.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.8,
      });
      chart.tooltip(false);
      chart
        .interval()
        .adjust('stack')
        .position('value')
        .color('type',['#F0F2F5','#00FF00', '#FFA500', '#FF0000'])
        .shape('slice-shape');

      chart.render();
    },




  },
}
</script>
